<template>
	<view class="mainpadding beijingse">
		<!-- 优惠券 -->
		<u-popup :show="show" @close="close" :round="12">
			<view class="mainpadding">
				<view class="flexbetween">
					<view class="xiaohei bigtext fonweight">优惠</view>
					<u-icon name="close" color="#999999"></u-icon>
				</view>
				<view class="xiaohei sanshier margin_top">可使用的优惠券</view>
				<view class="" style="height: 500rpx; overflow: auto;">
					<view class="yhbjt margin_top" v-for="item in 30">
						<view class="flexbetween">
							<view class="fonweight xiaohong" style="font-size: 45rpx;">8.5
								<text class="strongtext xiaohong fonweight">折</text>
							</view>
							<view class="flexbetween" style="width: 74%;">
								<view class="">
									<view class="flexleft">
										<view class="xhbtn flexcenter margin_right1">折扣券</view>
										<view class="ershiba fonweight">新人折扣券</view>
									</view>
									<view class="xiaohui strongtext margin_top2">2023.10.11-2023.10.15</view>
								</view>
								<view class="">
									<!-- 未选中 -->
									<view class="weixz margin_right1"></view>
									<!-- 已选中 -->
									<!-- <view class="margin_right1">
					<u-icon name="checkmark-circle-fill" color="#FF0000" size="19"></u-icon>
				</view> -->
								</view>
							</view>
						</view>
						<view class="smalltext xiaohui margin_top4">全平台可以，可用于某某某...</view>
					</view>
				</view>

			</view>
		</u-popup>
		<view class="">
			<!-- 有地址 -->
			<view class="ffffff radius mainpadding ffffff">
				<view class="flexleft">
					<view class="mrbtn flexcenter margin_right2">默认</view>
					<view class="ershiba xiaohui">河南省郑州市郑东新区</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="sanshier xiaohei fonweight">开元学府-3号楼1单元2412室</view>
					<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
				</view>
				<view class="flexleft margin_top1">
					<view class="ershiba  margin_right2">张三</view>
					<view class="ershiba ">18874859652</view>
				</view>
			</view>
			<!-- 无地址 -->
			<!-- <view class="ffffff radius mainpadding ffffff">
				<view class="flexbetween margin_top1">
					<view class="sanshier xiaohei fonweight">请选择收货地址</view>
					<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
				</view>
			</view> -->
			<!-- 商品信息 -->
			<view class="margin_top ffffff radius mainpadding">
				<view class="shangbj" v-for="item in 2">
					<view class="flexbetween">
						<image class="sptp" src="../static/image/system/zybjt.png" mode=""></image>
						<view class="" style="width: 67%;">
							<view class="ershiba fonweight yhxk">洋河 海之蓝 绵柔浓香型白...</view>
							<view class="strongtext xiaohui yhxk margin_top2">海之蓝 42度 480ml2瓶...</view>
							<view class="flexbetween margin_top4">
								<view class="strongtext fonweight">￥
									<text class="bigtext fonweight">380</text>
								</view>
								<view class="jianbox flexbetween">
									<view class="" style="padding-left: 10rpx;">
										<u-icon name="minus" color="#B4B4B4" size="14"></u-icon>
									</view>
									<view class="biak"></view>
									<view class="ershiba xiaohei textcenter" style="width: 70rpx;">1</view>
									<view class="biak"></view>
									<view class="" style="padding-right: 10rpx;">
										<u-icon name="plus" color="#333333" size="16"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="margin_top ffffff radius mainpadding">
				<view class="flexbetween">
					<view class="ershiba xiaohui">优惠</view>
					<view class="flexright" @click="show = true">
						<view class="ershiba xiaohui margin_right1">暂无可用优惠券</view>
						<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohui">运费</view>
					<view class="ershiba">包邮</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohui">订单备注</view>
					<input type="text" placeholder="选填" class="textright">
				</view>
			</view>
		</view>
		<view class="ffffff mainpadding gudingdb flexbetween">
			<view class="bigtext xiaohong fonweight">￥
				<text class="xiaohong fonweight" style="font-size: 50rpx;">380</text>
			</view>
			<view class="lanbtn flexcenter" @click="tzzfdd">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			// 跳转支付订单
			tzzfdd() {
				uni.navigateTo({
					url: '/pages_homepage/zhifudd'
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xhbtn {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF0000;
		width: 72rpx;
		height: 32rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #FF0000;
	}

	.yhbjt {
		padding: 36rpx 32rpx 10rpx 35rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yhq.png');
	}

	.lanbtn {
		width: 224rpx;
		height: 88rpx;
		background: #2361FF;
		border-radius: 245rpx 245rpx 245rpx 245rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.shangbj:first-child {
		margin-top: 0rpx;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.sptp {
		width: 196rpx;
		height: 196rpx;
		border-radius: 15rpx;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.mrbtn {
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		width: 65rpx;
		height: 28rpx;
		background: #2361FF;
		border-radius: 16rpx 2rpx 16rpx 16rpx;
	}
</style>